import { mergeAttributes, Node, nodePasteRule } from '@tiptap/core'

export default Node.create({
  name: 'video',
  addOptions() {
    return {
      addPasteHandler: true,
      allowFullscreen: true,
      autoplay: false,
      ccLanguage: undefined,
      ccLoadPolicy: undefined,
      controls: true,
      disableKBcontrols: false,
      enableIFrameApi: false,
      endTime: 0,
      height: 480,
      interfaceLanguage: undefined,
      ivLoadPolicy: 0,
      loop: false,
      modestBranding: false,
      HTMLAttributes: {},
      inline: false,
      nocookie: false,
      origin: '',
      playlist: '',
      progressBarColor: undefined,
      width: 640,
    }
  },
  inline() {
    return this.options.inline
  },
  group() {
    return this.options.inline ? 'inline' : 'block'
  },
  draggable: true,
  addAttributes() {
    return {
      src: {
        default: null,
      },
      start: {
        default: 0,
      },
      width: {
        default: this.options.width,
      },
      height: {
        default: this.options.height,
      },
    }
  },
  parseHTML() {
    return [
      {
        tag: 'div[data-video] video',
      },
    ]
  },

  addCommands() {
    return {
      setVideo: (options) => ({ commands }) => {
        if (!options.src) {
          return false
        }
        return commands.insertContent({
          type: this.name,
          attrs: options,
        })
      },
    }
  },
  // addPasteRules() {
  //   if (!this.options.addPasteHandler) {
  //     return []
  //   }
  //
  //   return [
  //     nodePasteRule({
  //       find: YOUTUBE_REGEX_GLOBAL,
  //       type: this.type,
  //       getAttributes: match => {
  //         return { src: match.input }
  //       },
  //     }),
  //   ]
  // },
  renderHTML({ HTMLAttributes }) {
    return [
      'p',
      mergeAttributes({
        style: "text-align: center;"
      }),
      [
        'video',
        mergeAttributes(
          this.options.HTMLAttributes,
          {
            style: 'display: block;'
          },
          {
            width: this.options.width,
            height: this.options.height,
            allowfullscreen: this.options.allowFullscreen,
            autoplay: this.options.autoplay,
            ccLanguage: this.options.ccLanguage,
            ccLoadPolicy: this.options.ccLoadPolicy,
            disableKBcontrols: this.options.disableKBcontrols,
            enableIFrameApi: this.options.enableIFrameApi,
            endTime: this.options.endTime,
            interfaceLanguage: this.options.interfaceLanguage,
            ivLoadPolicy: this.options.ivLoadPolicy,
            loop: this.options.loop,
            modestBranding: this.options.modestBranding,
            origin: this.options.origin,
            playlist: this.options.playlist,
            progressBarColor: this.options.progressBarColor,
          },
          HTMLAttributes
        ),
      ]
    ]
  },
})
